<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/notice' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>成绩编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card shadow="never">
      <!-- 步骤条区域 -->
      <el-steps :space="200" :active="active-0" finish-status="success" align-center>
        <el-step title="开始添加"></el-step>
        <el-step title="选择学生"></el-step>
        <el-step title="选择课程"></el-step>
        <el-step title="添加成绩"></el-step>
      </el-steps>

      <!-- 表单区域 -->
      <el-form
        ref="addFormRef"
        :rules="addRules"
        :model="addForm"
        label-width="100px"
        size="medium"
        class="addForm"
      >
        <!-- 导航标签区域 -->
        <el-tabs tab-position="left" style="height: 240px;" class="addTabs" v-model="active">
          <el-tab-pane label="学生姓名" name="1">
            <el-form-item label="专业名称:" prop="major">
              <el-cascader
                v-model="major"
                :options="majors"
                :props="{ expandTrigger: 'hover',value:'label' }"
                :show-all-levels="false"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="学生姓名:" prop="student">
              <el-select
                v-model="addForm.student"
                placeholder="请选择"
                no-data-text="请先选择所属专业"
                @focus="getStudentInfo(majorName.major)"
              >
                <el-option
                  v-for="item in students"
                  :key="item._id"
                  :label="item.username"
                  :value="item._id"
                >
                  <span style="float: left">{{ item.username }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.sequence }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="课程名称" name="2">
            <el-form-item label="课程名称:" prop="lesson">
              <el-select
                v-model="addForm.lesson"
                placeholder="请选择"
                @focus="getLesson(majorName.college)"
              >
                <el-option
                  v-for="item in lessons"
                  :key="item._id"
                  :label="item.subject"
                  :value="item._id"
                >
                  <span style="float: left">{{ item.subject }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.username }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="考试成绩" name="3">
            <el-form-item label="期末成绩:" prop="final">
              <el-input v-model="addForm.final"></el-input>
            </el-form-item>
            <el-form-item label="补考成绩:" prop="makeUp">
              <el-input v-model="addForm.makeUp"></el-input>
            </el-form-item>
            <el-form-item label="重修成绩:" prop="rebuild">
              <el-input v-model="addForm.rebuild"></el-input>
            </el-form-item>
            <div class="operate">
              <el-button type="primary" size="medium" @click="addScore">确认添加</el-button>
              <el-button type="info" size="medium" @click="clearForm">重置表单</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 成绩添加表单
      addForm: {
        student: '',
        lesson: '',
        final: '',
        makeUp: 0,
        rebuild: 0
      },
      // 导航栏及步骤条激活标志
      active: '1',
      // 存储专业列表
      majors: [],
      // 存储选中专业
      major: [],
      // 存储专业下所有学生
      students: [],
      // 存储专业下所设所有课程
      lessons: [],
      // 添加成绩表单的校验规则
      addRules: {
        student: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' }
        ],
        lesson: [
          { required: true, message: '请选择课程名称', trigger: 'blur' }
        ],
        final: [{ required: true, message: '请输入期末成绩', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取所有所有专业
    async getMajor() {
      // 发起请求
      let res = await this.$http.get('colleges')
      // 获取失败
      if (res.meta.status !== 200) {
        return this.$message.error('获取专业信息失败')
      }
      // 获取成功
      this.majors = res.data
    },
    // 获取该专业下所有学生信息
    async getStudentInfo(major) {
      // 发起请求
      let res = await this.$http.get('users/student', { params: { major } })
      // 获取失败
      if (res.meta.status !== 200) {
        return this.$message.error('获取学生信息失败')
      }
      // 获取成功
      this.students = res.data
    },
    // 获取该学院下所设课程
    async getLesson(college) {
      // 发起请求
      let res = await this.$http.get('lessons/college', { params: { college } })
      // 获取失败
      if (res.meta.status !== 200) {
        return this.$message.error('获取课程信息失败')
      }
      // 获取成功
      this.lessons = res.data
    },
    // 添加学生成绩
    addScore() {
      // 验证表单
      this.$refs.addFormRef.validate(async valid => {
        // 验证失败，直接返回
        if (!valid) return
        // 验证成功，发起请求
        let res = await this.$http.post('scores', this.addForm)
        // 添加失败
        if (res.meta.status !== 201) {
          return this.$message.error('添加学生成绩失败')
        }
        // 添加成功
        this.$message.success('添加学生成绩成功')
        // 跳转到开始标签栏
        this.active = '1'
        // 重置期末成绩表单项
        this.addForm.final = ''
      })
    },
    clearForm() {
      // 跳转到开始标签栏
      this.active = '1'
      // 重置整个表单
      this.$refs.addFormRef.resetFields()
    }
  },
  created() {
    this.getMajor()
  },
  computed: {
    // 准确获取专业名称
    majorName() {
      let major = this.major
      if (major.length === 0) {
        return { major: '请先选择所属专业', college: '请先选择所属学院' }
      } else {
        return { major: major[major.length - 1], college: major[0] }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.addTabs {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.operate {
  text-align: center;
}
</style>